<template>
  <el-form>
    <el-row>
      <el-col :span="24">
        <el-form-item prop="label"
                      label="标签"
                      :label-width="labelWidth">
          <el-input :value="label"
                    @input="handleLabel" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item prop="type"
                      label="类型"
                      :label-width="labelWidth">
          <dictionary-select group="COLUMN"
                             style="width: 100%"
                             :value="type"
                             @input="handleType" />
        </el-form-item>
        <el-form-item v-if="type === 'dictionary'"
                      prop="group"
                      label="字典组"
                      :label-width="labelWidth">
          <dictionary-group-select style="width: 100%"
                                   :value="group"
                                   @input="handleGroup" />
        </el-form-item>
        <el-form-item v-if="type === 'advance'"
                      prop="control"
                      label="组件名"
                      :label-width="labelWidth">
          <el-input :value="control"
                    @input="handleControl" />
        </el-form-item>
        <el-form-item v-if="type === 'advance'"
                      prop="preset"
                      label="预设值"
                      :label-width="labelWidth">
          <object-input :value="preset"
                        @input="handlePreset" />
        </el-form-item>
        <el-form-item v-if="type === 'action'"
                      prop="actions"
                      :label-width="labelWidth">
          <action-attributes-editor :value="actions"
                                    @input="handleActions" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item prop="name"
                      label="字段"
                      :label-width="labelWidth">
          <el-input :value="name"
                    @input="handleName" />
        </el-form-item>
      </el-col>
      <!-- 列宽 -->
      <el-col :span="24">
        <el-form-item prop="width"
                      label="宽度"
                      :label-width="labelWidth">
          <el-input :value="width"
                    @input="handleColumn" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="sortable"
                      label="排序"
                      :label-width="labelWidth">
          <el-switch :value="sortable"
                     @input="handleSortable" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="hidden"
                      label="显示"
                      :label-width="labelWidth">
          <el-switch :value="!hidden"
                     @input="handleHidden" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import ObjectInput from "../../basic/ObjectInput.vue";
import DictionarySelect from "../../basic/DictionarySelect.vue";
import DictionaryGroupSelect from "../../advance/DictionaryGroupSelect.vue";
import ActionAttributesEditor from "./ActionAttributesEditor.vue";
import BoxMixin from "../box.mixin";
export default {
  name: "ColumnAttributeEditor",
  components: {
    ObjectInput,
    DictionarySelect,
    DictionaryGroupSelect,
    ActionAttributesEditor
  },
  mixins: [BoxMixin]
};
</script>
